<script lang="ts">
import { defineComponent } from 'vue'
import YuanButton from '../components/YuanButton.vue'
import { onMounted, ref, onUnmounted } from 'vue'
import {
  getHomls,
  getUplod,
  getTixue,
  getDoll,
  getDepartment,
  getPendant,
  getComd
} from '../api/yuan'
import { useRouter } from 'vue-router'

export default defineComponent({
  components: {
    YuanButton
  },
  setup() {
    let router: any = useRouter()

    //人气好物
    var Homls: any = ref<Array<any>>([])
    const getHomlsFun = () => {
      getHomls().then((data: any) => {
        // console.log(data);
        Homls.value = data.data.list
      })
    }

    // 代理
    var Comd: any = ref<Array<any>>([])
    const getComdFun = () => {
      getComd().then((data: any) => {
        // console.log(data);
        // Homls.value = data.data.list
      })
    }

    // T恤  getTixue

    var Tixue: any = ref<Array<any>>([])
    const getTixueFun = () => {
      getTixue().then((data: any) => {
        // console.log(data);
        Tixue.value = data.data.list
      })
    }

    // 手办
    var Uplod: any = ref<Array<any>>([])
    const getUplodFun = () => {
      getUplod().then((data: any) => {
        // console.log(data);
        Uplod.value = data.data.list
      })
    }
    //玩偶  getDoll
    var Doll: any = ref<Array<any>>([])
    const getDollFun = () => {
      getDoll().then((data: any) => {
        // console.log(data);
        Doll.value = data.data.list
      })
    }
    //百货 getDepartment
    var Department: any = ref<Array<any>>([])
    const getDepartmentFun = () => {
      getDepartment().then((data: any) => {
        // console.log(data);
        // Department.value = data.data.list
      })
    }
    //挂件摆件getPendant

    var Pendant: any = ref<Array<any>>([])
    const getPendantFun = () => {
      getPendant().then((data: any) => {
        console.log(data)
        Pendant.value = data.data.list
      })
    }
    // 跳转路由
    const goPage = (path: any, goods_id: any) => {
      console.log(goods_id)

      router.push({
        path,
        query: {
          goods_id // 商品id
        }
      })
    }

    const goSearch = (path: any) => {
      router.push({
        path
      })
    }

    const goHome = (path: any) => {
      router.push({
        path
      })
    }

    // 返回顶部按钮

    const backTopFlag = ref(false) //用来判断样式
    const backTop = () => {
      let top = document.documentElement.scrollTop //获取点击时页面的滚动条纵坐标位置
      const timeTop = setInterval(() => {
        document.documentElement.scrollTop = top -= 50 //一次减50往上滑动
        if (top <= 0) {
          clearInterval(timeTop)
        }
      }, 5) //定时调用函数使其更顺滑
    }
    const handleScroll = () => {
      if (document.documentElement.scrollTop > 20) {
        backTopFlag.value = true
      } else {
        backTopFlag.value = false
      }
      //往下滑超过20则显示 否则则不显示按钮
    }

    onMounted(() => {
      getHomlsFun() //人气好物
      getUplodFun() // 手办

      getTixueFun() //T恤
      getDollFun() //玩偶
      getDepartmentFun() //百货

      getPendantFun() //挂件摆件
      getComdFun()
      window.addEventListener('scroll', handleScroll) //监听滚动事件
    })

    onUnmounted(() => {
      window.removeEventListener('scroll', handleScroll) //离开页面时移除监听事件
    })

    return {
      Homls, // 返回数据
      Uplod,
      Tixue, //T恤
      Doll, //玩偶
      Department, //百货

      Comd,
      Pendant, //挂件

      goPage, // 跳转路由
      goHome,
      goSearch,
      backTopFlag,
      backTop
    }
  }
})
</script>

<template>
  <div class="mhy">
    <van-sticky :offset-top="0">
      <div class="mhy-no">
        <div class="rile" @click="goHome('/')"><span class="iconfont icon-zuojian"></span></div>
        <div class="no" @click="goSearch('/search')">
          <div class="iconfont icon-sousuo">
            <span class="xu">须弥</span>
          </div>
        </div>

        <div class="leftl">
          <div class="tle"><span class="iconfont icon-sangedian"></span></div>
        </div>
      </div>
    </van-sticky>

    <div class="titlie">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" :show-indicators="false">
        <van-swipe-item> <img src="../assets/img/39.jpg" alt="" /></van-swipe-item>
        <van-swipe-item> <img src="../assets/img/40.jpg" alt="" /></van-swipe-item>
        <van-swipe-item> <img src="../assets/img/41.jpg" alt="" /></van-swipe-item>
      </van-swipe>
    </div>

    <div class="font">
      <img src="../assets/img/10.jpg" alt="" />
    </div>

    <div class="rift">
      <div class="loading">
        <ul>
          <!-- // 跳转路由 -->
          <li v-for="item in Homls" :key="item.goods_id" @click="goPage('/detail', item.goods_id)">
            <div class="card__title">
              <!-- <img src="../assets/img/11.jpg" alt=""> -->

              <img :src="item.cover_url" alt="" v-lazy="item.cover_url" />
            </div>
            <h5 class="lis">
              <span class="tss">
                <img src="../assets/img/12.jpg" alt="" />
              </span>
              <span class="card">
                <!-- 【原神】风花的呼吸主题系列 收藏卡 Genshin -->
                {{ item.name }}
              </span>
            </h5>
            <div class="rd">
              <span class="let-1">¥</span>
              <span class="let-2">
                {{ (item.market_price / 100).toFixed(2) }}
              </span>
              <!-- <span class="let-3">.00</span> -->
            </div>
          </li>
        </ul>
      </div>
      <div class="uls"><img src="../assets/img/13.jpg" alt="" /></div>

      <!-- 手办 -->
      <div class="mhy-backtop">
        <div class="top">
          <ul>
            <li
              v-for="item in Uplod"
              :key="item.goods_id"
              @click="goPage('/detail', item.goods_id)"
            >
              <div class="back">
                <!-- <img src="../assets/img/14.jpg" alt=""> -->
                <img :src="item.cover_url" alt="" v-lazy="item.cover_url" />
              </div>
              <h5 class="one-txt-cut">
                <!-- 【原神】御建鸣神主尊大御所大人像 Genshin -->
                {{ item.name }}
              </h5>
              <div class="cutl">
                <span class="cutl-1">¥</span>
                <span class="cutl-2">{{ (item.market_price / 100).toFixed(2) }}</span>

                <!-- <span class="cutl-3">.00</span> -->
              </div>
            </li>
          </ul>
        </div>
      </div>

      <div class="indx">
        <img src="../assets/img/21.jpg" alt="" />
      </div>

      <!-- 轮播图 -->
      <van-swipe class="my-swipe" :autoplay="3000">
        <van-swipe-item>
          <div class="indx">
            <img src="../assets/img/20.jpg" alt="" />
          </div>
        </van-swipe-item>

        <van-swipe-item>
          <div class="indx">
            <img src="../assets/img/22.jpg" alt="" />
          </div>
        </van-swipe-item>

        <van-swipe-item>
          <div class="indx">
            <img src="../assets/img/23.jpg" alt="" />
          </div>
        </van-swipe-item>

        <van-swipe-item>
          <div class="indx">
            <img src="../assets/img/24.jpg" alt="" />
          </div>
        </van-swipe-item>
      </van-swipe>

      <!-- 雷点将军服饰系列 -->

      <div class="indx">
        <img src="../assets/img/25.jpg" alt="" />
      </div>

      <!-- T恤4个 -->

      <div class="loading">
        <ul>
          <li v-for="item in Tixue" :key="item.goods_id" @click="goPage('/detail', item.goods_id)">
            <div class="card__title">
              <!-- <img src="../assets/img/11.jpg" alt=""> -->

              <img :src="item.cover_url" alt="" v-lazy="item.cover_url" />
            </div>
            <h5 class="lis">
              <span class="tss">
                <img src="../assets/img/12.jpg" alt="" />
              </span>
              <span class="card">
                <!-- 【原神】风花的呼吸主题系列 收藏卡 Genshin -->
                {{ item.name }}
              </span>
            </h5>
            <div class="rd">
              <span class="let-1">¥</span>
              <span class="let-2">{{ (item.market_price / 100).toFixed(2) }}</span>
              <!-- <span class="let-3">.00</span> -->
            </div>
          </li>
        </ul>
      </div>

      <!-- 玩偶 -->
      <div class="indx">
        <img src="../assets/img/26.jpg" alt="" />
      </div>

      <div class="mhy-backtop">
        <div class="top">
          <ul>
            <li v-for="item in Doll" :key="item.goods_id" @click="goPage('/detail', item.goods_id)">
              <div class="back">
                <!-- <img src="../assets/img/14.jpg" alt=""> -->
                <img :src="item.cover_url" alt="" v-lazy="item.cover_url" />
              </div>
              <h5 class="one-txt-cut">
                <!-- 【原神】御建鸣神主尊大御所大人像 Genshin -->
                {{ item.name }}
              </h5>
              <div class="cutl">
                <span class="cutl-1">¥</span>
                <span class="cutl-2">{{ (item.market_price / 100).toFixed(2) }}</span>

                <!-- <span class="cutl-3">.00</span> -->
              </div>
            </li>
          </ul>
        </div>
      </div>

      <div class="mhy-backtop">
        <div class="top">
          <ul>
            <li v-for="item in Department" :key="item.goods_id">
              <div class="back">
                <!-- <img src="../assets/img/14.jpg" alt=""> -->
                <img :src="item.cover_url" alt="" v-lazy="item.cover_url" />
              </div>
              <h5 class="one-txt-cut">
                <!-- 【原神】御建鸣神主尊大御所大人像 Genshin -->
                {{ item.name }}
              </h5>
              <div class="cutl">
                <span class="cutl-1">¥</span>
                <span class="cutl-2">{{ (item.market_price / 100).toFixed(2) }}</span>

                <!-- <span class="cutl-3">.00</span> -->
              </div>
            </li>
          </ul>
        </div>
      </div>

      <!-- 挂件摆件 -->
      <div class="indx">
        <img src="../assets/img/28.jpg" alt="" />
      </div>

      <div class="mhy-backtop">
        <div class="top">
          <ul>
            <li
              v-for="item in Pendant"
              :key="item.goods_id"
              @click="goPage('/detail', item.goods_id)"
            >
              <div class="back">
                <!-- <img src="../assets/img/14.jpg" alt=""> -->
                <img :src="item.cover_url" alt="" v-lazy="item.cover_url" />
              </div>
              <h5 class="one-txt-cut">
                <!-- 【原神】御建鸣神主尊大御所大人像 Genshin -->
                {{ item.name }}
              </h5>
              <div class="cutl">
                <span class="cutl-1">¥</span>
                <span class="cutl-2">{{ (item.market_price / 100).toFixed(2) }}</span>

                <!-- <span class="cutl-3">.00</span> -->
              </div>
            </li>
          </ul>
        </div>
      </div>

      <!-- 主题系列 -->
      <div class="indx">
        <img src="../assets/img/30.jpg" alt="" />
      </div>

      <div class="indx">
        <img src="../assets/img/31.jpg" alt="" />
      </div>

      <div class="indx">
        <img src="../assets/img/32.jpg" alt="" />
      </div>
    </div>
  </div>

  <!-- 返回顶部 -->
  <div :class="backTopFlag ? 'active' : 'inactive'" @click="backTop">
    <i class="iconfont icon-shangjiantou"></i>
  </div>

  <YuanButton :active="0" />
</template>

<style scoped>
@import url(../../src/assets/font01/iconfont.css);

.active {
  position: fixed;
  right: 20px;
  bottom: 110px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.95);
  animation: active 1s;
  -webkit-animation: active 1s;
  overflow: hidden;
  i {
    font-size: 12px;
    color: rgb(197, 197, 203);
  }
}
@keyframes active {
  0% {
    height: 0px;
  }

  100% {
    height: 40px;
  }
}
.inactive {
  position: fixed;
  right: 20px;
  bottom: 110px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 50%;
  animation: inactive 1s;
  -webkit-animation: inactive 1s;
  animation-fill-mode: forwards;
  overflow: hidden;
  i {
    font-size: 12px;
    color: rgb(197, 197, 203);
  }
}

@keyframes inactive {
  0% {
    height: 40px;
  }

  100% {
    height: 0px;
  }
}

.van-back-top--active {
  transform: scale(1);

  top: 523px;
}

.mhy {
  min-width: 320px;
  max-width: 750px;
  background-color: #c8dcfc;
}

.mhy-no {
  height: 45px;
  /* background-color: #ffffff; */
  display: flex;
  position: fixed;
  width: 100%;
  /* border-bottom: 1px solid #f3f3f5; */
  /* background: rgba(22,22,46,.3) */
}

.no {
  height: 34px;
  background-color: #f9f9f9;
  margin-left: 11px;
  width: 80%;
  margin-top: 5px;
  border-radius: 14px;
  padding-right: 50px;
  display: flex;
  background: rgba(22, 22, 46, 0.3);
}

.leftl {
  height: 32px;
  background-color: #ffffff;
  border: 1px solid #f6f6f6;
  width: 15%;
  margin-right: 10px;
  margin-left: 5px;
  margin-top: 6px;
  border-radius: 20px;
  margin-right: 5px;
  background: rgba(22, 22, 46, 0.3);
}

.no .iconfont {
  line-height: 35px;
  padding-left: 10px;
  color: #9696a1;
}

.no .xu {
  font-size: 14px;
  margin-left: 2px;
  color: #e8e8e9;
}

.leftl .iconfont {
  padding-left: 2px;
}

.leftl .tle {
  height: 22px;
  width: 22px;
  margin: 0 auto;
  /* background-color: beige; */
  padding-top: 8px;
}

.titlie {
  width: 100%;
  height: auto;
}

.titlie img {
  width: 100%;
}

.rile {
  /* height: 20px;
    margin-top: 10px; */
  /* background-color: red; */
  width: 10%;
  margin-left: 10px;
}

.rile .iconfont {
  line-height: 43px;
  padding-left: 5px;
}

.font {
  width: 100%;
  height: auto;
}

.font img {
  width: 100%;
}

.rift {
  width: 100%;
  /* height: 700px; */
  /* background-color: red; */
  height: 100%;
  margin-top: 20px;
}

.loading {
  margin: 0 18px;

  /* height: 700px; */
  /* background-color: orange; */
  display: flex;
}

.loading ul {
  display: flex;
  width: 100%;
  justify-content: space-between;
  flex-wrap: wrap;
}

.loading li {
  width: 48%;
  /* height: 230px; */
  background-color: #ffffff;
  margin-top: 10px;
  border-radius: 8px;
}

/* .card__title{
   height: 145px; 
    background-color: firebrick; 
  } */
.card__title img {
  border-radius: 8px;
  width: 100%;
}

.loading .lis {
  font-size: 15px;
  font-weight: 500;
  color: #2d2d49;
  line-height: 15px;
  margin: 0 10px;
  overflow: hidden;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  /* height: 36px; */
  /* background-color: khaki; */
}

.loading .card {
  font-size: 8px;
}

.tss {
  width: 35px;
  /* height: 15px; */

  vertical-align: bottom;
  display: inline-block;
}

.tss img {
  width: 100%;
}

.rd {
  height: 24px;
  /* background-color: blueviolet; */
  margin: 0 10px;
  margin-top: 6px;
  display: flex;
}

.rd .let-1 {
  font-size: 10px;
  font-weight: 700;
  font-family: 'Fira Sans Black Italic';
  font-style: italic;
}

.rd .let-2 {
  font-size: 12px;
  font-weight: 700;
  font-family: 'Fira Sans Black Italic';
  font-style: italic;
}

.rd .let-3 {
  font-size: 10px;
  font-weight: 700;
  font-family: 'Fira Sans Black Italic';
  font-style: italic;
}

.uls {
  width: 100%;
  height: auto;
}

.uls img {
  width: 100%;
  margin-top: 17px;
}

.mhy-backtop {
  width: 100%;
}

.mhy-backtop .top {
  margin: 0 18px;
  display: flex;
  /* background-color: red; */
  /* height: 700px; */
}

.top ul {
  display: flex;
  width: 100%;
  justify-content: space-between;
  flex-wrap: wrap;
}

.top li {
  width: 32%;
  background-color: #ffffff;
  height: 147px;
  margin-top: 10px;
  border-radius: 8px;
}

.back img {
  border-radius: 8px;
  width: 100%;
}

.top .one-txt-cut {
  font-size: 10px;
  font-weight: 500;
  color: #2d2d49;
  margin: 0 10px;
  overflow: hidden;

  -webkit-box-orient: vertical;
  height: 17px;
  width: 73px;
}

.cutl {
  margin: 0 10px;
  margin-top: 3px;
  display: flex;
}

.cutl .cutl-1 {
  font-size: 10px;
  font-weight: 700;
  font-family: 'Fira Sans Black Italic';
  font-style: italic;
}

.cutl .cutl-2 {
  font-size: 10px;
  font-weight: 700;
  font-family: 'Fira Sans Black Italic';
  font-style: italic;
}

.cutl .cutl-3 {
  font-size: 10px;
  font-weight: 700;
  font-family: 'Fira Sans Black Italic';
  font-style: italic;
}

.indx {
  width: 100%;
  height: auto;
}

.indx img {
  width: 100%;
  margin-top: 10px;
}
</style>
